<!doctype html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!-- Consider adding a manifest.appcache: h5bp.com/d/Offline -->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <title>HoleRoad</title>
  
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  
  <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCWsAL_SzTxl6opVwOaoUYARNov78Rv_NY&sensor=false"></script>
  
  <!--script src="js/maps.js"></script -->
  
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <script language="javascript">
  	$(document).ready(function(){
  		// Creating a new map
		var map = new google.maps.Map(document.getElementById("map"), {
          center: new google.maps.LatLng(40.92804,14.526157),
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });
    
		
		// Creating a global infoWindow object that will be reused by all markers
		var infoWindow = new google.maps.InfoWindow();
		
		var jqxhr = $.getJSON("json/test.json", function(data) {})
		
		.success(function(data) { 
			$.each(data, function(index, value) {
  				
  				
  				latLng = new google.maps.LatLng(value.lat, value.lng);
  				
  				// Creating a marker and putting it on the map
				var marker = new google.maps.Marker({
					position: latLng,
					map: map,
					title: value.title
				});
	
				// Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
				(function(marker, value) {
	
					// Attaching a click event to the current marker
					google.maps.event.addListener(marker, "click", function(e) {
						infoWindow.setContent(value.description);
						infoWindow.open(map, marker);
					});
	
	
				})(marker, value);
			});
			
		})
		
		.error(function() { alert("error"); })
		.complete(function() { });
		
	})
  </script>  
  <div id="map"></div>

</body>
</html>